<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.keyword"
        placeholder="请输入关键字搜索"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select v-model="listQuery.subjectId" placeholder="学科" clearable class="filter-item" style="width: 150px">
        <el-option
          v-for="item in subjectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="listQuery.educationLevel" placeholder="教育阶段" clearable class="filter-item" style="width: 150px">
        <el-option label="小学" :value="1" />
        <el-option label="初中" :value="2" />
        <el-option label="高中" :value="3" />
        <el-option label="大学" :value="4" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button
        v-if="isTeacher || isAdmin"
        class="filter-item"
        style="margin-left: 10px;"
        type="success"
        icon="el-icon-upload"
        @click="handleUpload"
      >
        上传PPT
      </el-button>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in list" :key="item.id" class="ppt-item">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="ppt-preview" @click="handleView(item)">
            <img :src="item.coverUrl || defaultCover" class="ppt-cover">
            <div class="ppt-title">{{ item.title }}</div>
          </div>
          <div class="ppt-footer">
            <div class="ppt-info">
              <span>{{ item.subjectName }}</span>
              <span>{{ item.educationLevelName }}</span>
            </div>
            <div class="ppt-actions">
              <el-button type="text" size="mini" @click="handleDownload(item)">
                <i class="el-icon-download"></i>
              </el-button>
              <el-button v-if="canEdit(item)" type="text" size="mini" @click.stop="handleEdit(item)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button v-if="canDelete(item)" type="text" size="mini" @click.stop="handleDelete(item)">
                <i class="el-icon-delete"></i>
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[12, 24, 36, 48]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getPPTList, deletePPT } from '@/api/ppt';
import { getAllSubjects } from '@/api/subject';

export default {
  name: 'PPTCenter',
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        size: 12,
        keyword: '',
        subjectId: undefined,
        educationLevel: undefined
      },
      subjectOptions: [],
      loading: false,
      defaultCover: ''
    };
  },
  computed: {
    ...mapGetters(['isTeacher', 'isAdmin', 'userInfo'])
  },
  created() {
    this.getList();
    this.getSubjects();
  },
  methods: {
    getList() {
      this.loading = true;
      getPPTList(
        this.listQuery.page,
        this.listQuery.size,
        this.listQuery.keyword,
        this.listQuery.subjectId,
        this.listQuery.educationLevel
      )
        .then(response => {
          this.list = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getSubjects() {
      getAllSubjects().then(response => {
        this.subjectOptions = response.data.map(item => ({
          value: item.id,
          label: item.name
        }));
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleView(item) {
      this.$router.push(`/ppt-center/detail/${item.id}`);
    },
    handleUpload() {
      this.$router.push('/ppt-center/upload');
    },
    handleEdit(item) {
      this.$router.push(`/ppt-center/edit/${item.id}`);
    },
    handleDownload(item) {
      if (item.fileUrl) {
        const link = document.createElement('a');
        link.href = item.fileUrl;
        link.target = '_blank';
        link.download = `${item.title}.pptx`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        this.$message.error('文件链接不存在');
      }
    },
    handleDelete(item) {
      this.$confirm('确认删除该PPT课件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePPT(item.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        });
      }).catch(() => {
        // 用户取消删除
      });
    },
    canEdit(item) {
      return this.isAdmin || (this.userInfo && this.userInfo.id === item.userId);
    },
    canDelete(item) {
      return this.isAdmin || (this.userInfo && this.userInfo.id === item.userId);
    }
  }
};
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.filter-item {
  margin-right: 10px;
}
.ppt-item {
  margin-bottom: 20px;
}
.ppt-preview {
  cursor: pointer;
  position: relative;
  height: 135px;
  overflow: hidden;
}
.ppt-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ppt-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ppt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.ppt-info {
  font-size: 12px;
  color: #909399;
}
.ppt-info span {
  margin-right: 10px;
}
.pagination-container {
  text-align: center;
  margin-top: 30px;
}
</style> 